{$layout}
{$template "../user_menu"}

<columns-grid>
    <div class="ui column" v-if="uiConfig.showTrafficCharts">
        <h4>本月总流量</h4>
        <div class="value"><bytes-var :v-bytes="dashboard.monthlyTrafficBytes"></bytes-var></div>
    </div>

    <div class="ui column" v-if="uiConfig.showBandwidthCharts">
        <h4>本月带宽峰值</h4>
        <div class="value"><bits-var :v-bits="dashboard.monthlyPeekBandwidthBits"></bits-var></div>
    </div>

    <div class="ui column" v-if="uiConfig.showTrafficCharts">
        <h4>今日流量</h4>
        <div class="value"><bytes-var :v-bytes="dashboard.dailyTrafficBytes"></bytes-var></div>
    </div>

    <div class="ui column" v-if="uiConfig.showBandwidthCharts">
        <h4>今日带宽峰值</h4>
        <div class="value"><bits-var :v-bits="dashboard.dailyPeekBandwidthBits"></bits-var></div>
    </div>
</columns-grid>

<h4>网站列表</h4>
<p class="comment" v-if="servers.length == 0">当前用户下暂时还没有网站。</p>

<table class="ui table celled selectable" v-if="servers.length > 0">
    <thead>
    <tr>
        <th>网站名称</th>
        <th>部署集群</th>
        <th>域名</th>
        <th>端口</th>
        <th class="center" style="width: 8em">下行带宽<tip-icon content="最近5分钟峰值带宽，每5分钟更新一次"></tip-icon><sort-arrow name="trafficOutOrder"></sort-arrow></th>
        <th class="two wide center">状态</th>
        <th class="two op">操作</th>
    </tr>
    </thead>
    <tr v-for="server in servers">
        <td class="server-name-td"><a :href="'/servers/server?serverId=' + server.id"><keyword :v-word="keyword">{{server.name}}</keyword></a>  &nbsp; <a :href="'/servers/server/settings?serverId=' + server.id" title="设置"><i class="icon setting grey"></i></a>
            <div style="margin-top:0.4em">
                <grey-label>{{server.serverTypeName}}</grey-label>
            </div>
        </td>
        <td>{{server.cluster.name}}</td>
        <td>
			<span v-if="server.firstServerName.length > 0">
                <keyword :v-word="keyword">{{server.firstServerName}}</keyword>
				<span v-if="server.countServerNames > 1">等{{server.countServerNames}}个域名 <popup-icon :href="'/servers/serverNamesPopup?serverId=' + server.id" height="20em"></popup-icon></span>
			</span>
            <span v-else class="disabled">-</span>

            <!-- 审核中 -->
            <div v-if="server.isAuditing" style="margin-top: 0.5em">
                <a class="ui label basic tiny red" title="点击跳到审核页面" :href="'/servers/server/settings/serverNames?serverId=' + server.id">审核中<span class="small grey" v-if="server.auditingTime.length > 0">（{{server.auditingTime}}）</span> &nbsp;<i class="icon long arrow right alternate"></i></a>
            </div>

            <!-- 审核失败 -->
            <div v-if="!server.auditingIsOk" style="margin-top: 0.5em">
                <a class="ui label basic tiny red" title="点击跳到审核页面" :href="'/servers/server/settings/serverNames?serverId=' + server.id">审核不通过 &nbsp;<i class="icon long arrow right alternate"></i></a>
            </div>
        </td>
        <td>
            <span v-if="server.ports.length == 0">-</span>
            <div v-for="port in server.ports">
                <tiny-basic-label><keyword :v-word="keyword">{{port.portRange}}</keyword><span class="small">（{{port.protocol}}）</span></tiny-basic-label>
            </div>
        </td>
        <td class="center">
            <span v-if="server.bandwidthBits > 0" class="bandwidth-span"><bits-var :v-bits="server.bandwidthBits"></bits-var></span>
            <span class="disabled" v-else>-</span>
        </td>
        <td class="center">
            <div v-if="!checkDNS">
                <label-on :v-is-on="server.isOn"></label-on>
            </div>
            <div v-else>
                <span v-if="!server.isOn" class="grey">停用中</span>
                <span v-else-if="server.status.isOk" class="green">正常</span>
                <span v-else-if="server.status.message.length == 0">检查中</span>
                <span v-else class="red">{{server.status.message}}
                    <tip-icon :content="server.status.todo"></tip-icon>
                </span>
            </div>
        </td>
        <td>
            <a :href="'/servers/server?serverId=' + server.id">详情</a> &nbsp;
            <a :href="'/servers/server/settings?serverId=' + server.id">设置</a>
        </td>
    </tr>
</table>

<page-box></page-box>